<template>
	<view class="page">

		<!-- 视频播放 start -->
		<view class="player">
			<video 
				id="myVideo"
				class="video-play" 
				src="https://vfx.mtime.cn/Video/2018/12/20/mp4/181220224119287421_480.mp4" 
				poster="../../static/movie/黑衣人：全球追缉/poster/1.jpg" 
				controls>
			</video>
		</view>
		<!-- 视频播放 end -->

		<!-- 电影基本信息 start -->
		<view class="movie-info">
			<navigator :url="'../poster/poster?poster=../../static/movie/黑衣人：全球追缉/poster/1.jpg'">
				<image 
					class="poster" 
					src="../../static/movie/黑衣人：全球追缉/poster/1.jpg">
				</image>
			</navigator>

			<view class="movie-desc">
				<view class="title">黑衣人：全球追缉</view>
				<view class="basic-info">2019 / 动作 / 冒险 / 喜剧</view>
				<view class="basic-info">主要演员：克里斯·海姆斯沃斯 / 泰莎·汤普森 / 连姆·尼森 / 丽贝卡·弗格森</view>
				<view class="basic-info">影片时长：115分钟</view>
				<view class="basic-info">上映时间：2019年6月14日</view>

				<view class="score-block">
					<view class="score-left">
						<view class="score-words">综合评分：</view>
						<view class="movie-score">9.1</view>
					</view>
					<view class="score-right">
						<block v-if="9.1 >= 0">
							<uni-rate readonly="true" size="10" :value="9.1/2"></uni-rate>
						</block>
						<view class="comments">36 人已评</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 电影基本信息 end -->

		<view class="line-wrapper">
			<view class="line"></view>
		</view>

		<!-- 剧情介绍 start -->
		<view class="plot-block">
			<view class="plot-title">剧情介绍</view>
			<view class="plot-desc">
				全球最具影响力的经典科幻IP《黑衣人》全面升级！科幻电影之父史蒂文·斯皮尔伯格联手《速度与激情8》导演F·加里·格雷，金牌班底鼎力巨献！英国黑衣人总部王牌探员H（锤哥）与新晋探员M（泰莎·汤普森）在阻止外星团伙入侵的过程中意外铲除了隐藏在黑衣人组织中的内奸，成功拯救世界。影片中，各种脑洞大开的外星人和颠覆想象的高科技装备轮番登场，热血沸腾惊心动魄的动作追车场面层出不穷，完美构建出全新的黑衣人宇宙观。
			</view>
		</view>
		<!-- 剧情介绍 end -->

		<!-- 电影评论 start -->
		<view class="plot-block">
			<view class="plot-title">电影评论</view>
		</view>
		
		<view class="cu-form-group">
			<textarea maxlength="-1" placeholder="内容..."></textarea>
			<button class='cu-btn bg-green shadow' @click="sendComment()">发表评论</button>
		</view>
		
		<view class="cu-card dynamic no-card">
			<view class="cu-item shadow">
		
				<view class="cu-list menu-avatar comment solids-top">
					<view class="cu-item">
						<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
						<view class="content">
							<view class="text-grey">莫甘娜</view>
							<view class="bg-grey padding-sm radius margin-top-sm  text-sm">
								<view class="flex">
									<view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
								</view>
							</view>
							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">2020年12月4日</view>
								<view>
									<text class="cuIcon-appreciatefill text-red"></text>
									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
								</view>
							</view>
						</view>
					</view>
		
					<view class="cu-item">
						<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
						<view class="content">
							<view class="text-grey">凯尔</view>
							<view class="bg-grey padding-sm radius margin-top-sm text-sm">
								<view class="flex">
									<view class="flex-sub">如果不能立足于大地，要这双脚又有何用?</view>
								</view>
							</view>
							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">2020年12月4日</view>
								<view>
									<text class="cuIcon-appreciate text-gray"></text>
									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>		
		<!-- 电影评论 end -->
	</view>
</template>

<script>
	import uniRate from "@/components/uni-rate/uni-rate.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"

	export default {
		data() {
			return {
				movie: {id: 1, name: "黑衣人：全球追缉"}
			}
		},
		onLoad(params) {
			var movieId = params.movieId;

			var me = this;
			var serverUrl = me.serverUrl;

			// 通过API修改导航栏的样式
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000000'
			});

			uni.showLoading({
				mask: true,
				title: '请稍候...'
			});

			// 请求电影数据
			uni.request({
				url: serverUrl + '/index/movie/hot?type=4',
				method: 'GET',
				success: (res) => {
					if (res.data.status == 200) {
						me.movie = res.data.data[0];
					}
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		// 页面初次渲染完成，获得视频上下文对象
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onHide() {
			// 页面被隐藏时，暂停播放
			this.videoContext.pause();
		},
		onShow() {
			// 页面再次显示时，继续播放
			if (this.videoContext) {
				this.videoContext.play();
			}
		},
		// 此函数仅仅只支持在小程序端的分享，可分享到微信群或者微信好友
		onShareAppMessage() {
			var me = this;
			return {
				title: me.movie.name,
				path: '/pages/movie/movie?movieId=' + me.movie.id
			};
		},
		// 监听导航栏的按钮
		onNavigationBarButtonTap(e) {
			var me = this;
			var movie = me.movie;
			
			var index = e.index;
			// console.log(index);
			// index=0 分享
			if (index == 0) {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 0,
					href: "http://192.168.1.3:8080/#/pages/movie/movie?movieId=" + movie.id,
					title: "电影预告：《"+ movie.name +"》",
					summary: "电影预告：《"+ movie.name +"》",
					imageUrl: "../../static/movie/黑衣人：全球追缉/poster/1.jpg",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}
		},
		methods: {
			// 预览图片
			previewPlotPic(e) {
				var me = this;
				var picindex = e.currentTarget.dataset.picindex;
				uni.previewImage({
					current: me.plotPicsArr[picindex],
					urls: me.plotPicsArr
				})
			},
			// 发表评论
			sendComment() {
				uni.showToast({
					title: '请先登录~',
					icon: 'none'
				})
			}
		},
		components: {
			uniRate
		}
	}
</script>

<style>
	@import url("movie.css");
</style>
